import Base from "../base.js";
import scheulesApi from "../../api/schedules.js";
import movieApi from "../../api/movies.js";
import orderApi from "../../api/order.js";
import seatsApi from "../../api/seats.js";
export default class extends Base {
  data = {
    orderdata: {
      movieImg: "",//电影图片
      moveName: "",//电影名
      cinemaName: "", //影院名
      theater: "",//放映厅
      displayName: "",//几排几号
      showDate: "",//日期
      showTime: "",//时间
      price: "",//价格
      nowdateTime: "",
    },
    movies: [],
    cinemas: [],
    theater: [],
    scheules: [],
    seats: []
  }
  render() {

    this.$el.html(`
    <div class="form-inline">
       <div style="margin-left:40px;dispaly:flex">
            选择电影 <select name="city2" style="width:250px;height:36px;margin-bottom:10px;border-color:#e6e6e6;" class="move">
            </select>
       </div>
        <div style="margin-left:40px;dispaly:flex">
            选择座位 <select name="city2" style="width:250px;height:36px;margin-bottom:10px;border-color:#e6e6e6;" class="seats">
           </select>
       </div>
       <div style="margin-bottom:20px;margin-left:40px;">
            下单时间
            <input type="text" id="test5" style="width:245px;height:36px;">
       </div>  
        <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" style="margin-left:150px;" id="submit">确认新增</button>
     </div>
     <table id="demo" lay-filter="test"></table>
        `);
    //时间选择器
    laydate.render({
      elem: '#test5'
      , type: 'datetime'
    });
    this.moveEle = $(".move");
    this.seats = $(".seats");
    this.submitBtn = $("#submit")
    this.tableEle = layui.table;
    this.laypage = layui.laypage;
  }

  // 获取电影列表
  async getmove() {
    this.data.movies = await movieApi.getall();
    this.rerender();
  }
  // 根据电影查询排片渲染下列表
  async getscheules(movieId) {
    this.data.scheules = await scheulesApi.searchSchedulesMovies(movieId);
    this.rerender();
  }
  // 获取对应排片座位数据
  async getsheating(schedules) {
    this.data.seats = await orderApi.changeseat(schedules);
    this.rerender()
  }
  rerender() {
    // 电影列表
    const [currentGrade] = this.data.movies;
    const options = _.map(this.data.movies, item => {
      return ` <option value="${item._id}">${item.cname}</option>`
    }).join("");
    this.moveEle.html(options).val(currentGrade._id);
    this.tableEle.reload('demo', {
      data: this.data.scheules
    });
    // 座位列表
    const [currentGrade1] = this.data.seats;
    const options1 = _.map(this.data.seats, item => {
      return ` <option value="${item._id}">
      ${item.seatId}</option>`
    }).join("");
    this.seats.html(options1).val(currentGrade1._id);
  }
  // 创建订单
  async createoeder() {
    const data = await orderApi.addOrder(this.data.orderdata);
    if(data._id){
      layer.msg('添加订单成功', {
        icon: 1,
        time: 2000 //2秒关闭（如果不配置，默认是3秒）
      }, function () {
        location.hash = "#/info/orderlist";
      });
    }
  
  }
  handle() {
    this.moveEle.on("change", e => {
      const movieId = e.target.value;
      this.getscheules(movieId);
    });
    // 点击相应座位获取对应编号
    this.seats.on("change", async (e) => {
      this.data.orderdata.seatingId = e.target.value;
      const seatingOne = await orderApi.getseatingOne(e.target.value);
      const seatsOne = await seatsApi.searchseatId(seatingOne.seatId);
      this.data.orderdata.displayName = seatsOne.displayName;
    })
    // 获取订单数据
    this.tableEle.on('tool(test)', obj => { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      const data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
      // 放映厅删除修改
      if (layEvent === 'edit') { //查看
        const schedules = data._id;
        console.log(data);
        console.log(data.movieId.movieimgs[0]);
        // 获取订单数据
        this.data.orderdata.moveName = data.movieId.name;
        this.data.orderdata.cinemaName = data.cinemasId.name;
        this.data.orderdata.theater = data.theaterId.theaterName;
        this.data.orderdata.showDate = data.showDate;
        this.data.orderdata.showTime = data.showTime;
        this.data.orderdata.price = data.price;
        this.data.orderdata.movieImg=data.movieId.movieimgs[0];
        this.getsheating(schedules);
        this.formele = layui.form;
      }
    });
    // 提交订单按钮
    this.submitBtn.on("click", async () => {
      const _id = this.data.orderdata.seatingId;
      console.log(_id);
      this.data.orderdata.nowdateTime = $('#test5').val();
      // 改变座位状态
      let status=false;
      await orderApi.changestatus({_id,status});
      this.createoeder()
    })
  }
  mounted() {
    this.getmove();
  }
}